<template>
  <Form class="xtx-form" ref="target" :validation-schema="rules" v-slot="{errors}">
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-user"></i>
        <Field v-model="formData.account" name="account" :class="{err: errors.account}"
          class="input" type="text" placeholder="请输入用户名" />
      </div>
      <div class="error" v-if="errors.account">{{errors.account}}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-phone"></i>
        <Field v-model="formData.mobile" name="mobile" :class="{err: errors.mobile}" class="input"
          type="text" placeholder="请输入手机号" />
      </div>
      <div class="error" v-if="errors.mobile">{{errors.mobile}}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-code"></i>
        <Field v-model="formData.code" name="code" :class="{err: errors.code}" class="input"
          type="text" placeholder="请输入验证码" />
        <span class="code" @click="send">
          {{time===0 ? '发送验证码': `${time}秒后发送`}}</span>
      </div>
      <div class="error" v-if="errors.code">{{errors.code}}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-lock"></i>
        <Field v-model="formData.password" name="password" :class="{err: errors.password}"
          class="input" type="password" placeholder="请输入密码" />
      </div>
      <div class="error" v-if="errors.password">{{errors.password}}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-lock"></i>
        <Field v-model="formData.rePassword" name="rePassword" :class="{err: errors.rePassword}"
          class="input" type="password" placeholder="请确认密码" />
      </div>
      <div class="error" v-if="errors.rePassword">{{errors.rePassword}}</div>
    </div>
    <a href="javascript:;" class="submit" @click="submit">立即提交</a>
  </Form>
</template>

<script>

import { userQQPatchCode } from '@/api/user.js'
import Message from '@/components/Message.js'
import { useCountdown } from '@/compositions'
import { reactive, ref } from 'vue'
import { Form, Field } from 'vee-validate'
import { mobile, code, accountAPI as account, password, rePassword } from '@/utils/validate'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
export default {
  name: 'CallbackPatch',
  components: { Form, Field },
  props: { unionId: { type: String, default: '', required: true } },
  setup (props) {
    // 1. 定义数据项
    const formData = reactive({
      account: null,
      mobile: null,
      code: null,
      password: null,
      rePassword: null
    })
    // 2. 定义校验规则
    const rules = {
      account: account,
      mobile: mobile, // 校验函数，
      code: code,
      password: password,
      rePassword: rePassword
    }

    const store = useStore()
    const router = useRouter()
    const doPatch = async () => {
      try {
        await store.dispatch('user/userQQPatchLogin', {
          unionId: props.unionId,
          ...formData
        })
        // 合并购物车
        await store.dispatch('cart/mergeLocalCart')
        Message({ type: 'success', text: '完善信息成功' })
        router.push('/')
      } catch (err) {
        Message({ type: 'error', text: '完善信息失败' })
      }
    }
    const target = ref(null)

    // 发验证码
    const { start, time } = useCountdown()
    const send = () => {
      // 1. 验证手机号
      if (mobile(formData.mobile) !== true) {
        return
      }
      if (time.value !== 0) {
        return
      }
      // 2. 调用api发验证码
      userQQPatchCode(formData.mobile).then(data => {
        console.log('userQQPatchCode', data)
        Message({ type: 'success', text: '验证码已发送' })
        start(60) // 60秒倒计时
      }).catch(err => {
        console.log(err)
        Message({ type: 'error', text: err.response.data.message })
      })
    }

    const submit = () => {
      // 表单兜底校验
      target.value.validate().then(valid => {
        if (valid) {
          doPatch()
        }
      })
    }

    return { formData, rules, target, submit, send, time }
  }
}
</script>

<style scoped lang='less'>
.code {
  position: absolute;
  right: 0;
  top: 0;
  line-height: 50px;
  width: 80px;
  color: #999;
  &:hover {
    cursor: pointer;
  }
}
</style>
